<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        div {
            align-items: center;
            transform: translate(50% 50%);
            animation: ;
        }
    </style>
    <p>1.A <br> 2.D<br>3.AB<br> 4.每个标签都有一个定义和意思 h1-h6 span p div <br>5.type属性可以让input 变成按钮 文本框 复选单选框 name 要把传送数据给后台的名字<br> 6.有3种 伪类选择器 层次选择器 标签选择器 伪元素：选择E元素用:first-child nth-child() last-child 选择兄弟同级元素用nth-of-type() 伪类E::before 在E元素前面增加内容 E::afte在E元素后面增加内容
        <br>6.有3种 伪类选择器 层次选择器 标签选择器 伪元素：选择E元素用:first-child nth-child() last-child 选择兄弟同级元素用nth-of-type() 伪类E::before 在E元素前面增加内容 E::afte在E元素后面增加内容<br>7.帮我们把所有的标签属性调成无 因为层级上下关系 需要修改的地方 重新写样式设置属性值即可<br>8.精灵图 用于减少HTTP请求次数 优化seo 把所有图片放在一张图片 通过background-postion的定位找到需要的图
        <br>9.transition: all; transition: none;animation-name: run; 设置动画的持续时间 animation-duration: 1s; 设置动画的延时 animation-delay: 1s; 设置动画的平滑速度 animation-timing-function: ease; 设置动画结束后的元素位置 animation-fill-mode: forwards; 设置动画执行次数 animation-iteration-count:
        infinite; 设置动画的返回 animation-direction: alternate;
        <br>10.标准盒子模型 盒子宽/高= 内容宽/高+左右/上下内边距+左右/上下边框+左右/上下外边距 (增加内外边距 边框 内容宽会把盒子撑大) 需要设置 box-sizing: border-box; 怪异盒子模型 内容宽/高=左右/上下内边距+左右/上下边框+内容宽/高 （增加左右内边距会把内容宽度缩小 不会影响盒子大小）<br>11.x <br>12.层级上下关系 表现 结构<br>13.bootstrap 可以让网页内容通过媒体查询 适应手机 平板 PC <br>14.link
        在html的head引入 @import是引入scss scss在翻译到对应的css文件
        <br> 15.SCSS是CSS的扩展语言 可以翻译成CSS样式 优点可以嵌套 函数 提取公因式 提升写代码的效率 也便于维护 通过@mixin的设置很多相同的样式 用@include引入到选择器中<br> 16.BFC是在HTML的规则 给每个div设置独立的空间不影响外部的父元素 也不会影响到子元素 <br>17.圆形:border-radius: 50%; 矩阵圆形:一个长方形 通过after before设置两个圆形 定位到左边和右边 等腰三角形 border-top 和
        border-left 相同的值
    </p>
    <p>18. 弹性盒子 display:flex 浮动 float:left

    </p>
    <p>19. 弹性盒子 display:flex justify-content: center; align-items: center; 定位 给父元素设置position: relative; 子元素设置 position: absolute; top:50% left:50% 用margin-left/top 数值是负值 子元素宽度的一半 定位+偏移量 给父元素设置position: relative; 子元素设置 position: absolute; letf/top: 50%transform:
        translate(-50% -50%);

    </p>
</body>

</html>